<template>
  <f7-page>
    <f7-navbar>
      <div>
        <f7-nav-left >
          <span class="Back" @click="sao()" v-if="$store.state.platform!='web'">扫一扫</span>
        </f7-nav-left>
      </div>
      <!--企业主页-->
      <f7-nav-right><f7-link href="/mine/setting/">设置</f7-link></f7-nav-right>
    </f7-navbar>
    <f7-toolbar>
      <tab isActive5="true" />
    </f7-toolbar>
   <f7-link @click="go('/mine/personalPage/',{personalid:businessCard.user_id})">
    <div class="list-block bg-master">
      <h2>
        <span class="bold ng-binding">{{userMg.real_name}}</span>
        <span class="role-icon ng-binding">{{userMg.role|roleAll()}}</span>
      </h2>
      <h4 class="text-white ng-binding">手机：{{userMg.phone}}</h4>
      <img slot="media" :src="userMg.photo_url" class="logo-icon" />
    </div>
   </f7-link>
    <f7-link @click="go('/mine/companyPage/',{businessid:businessCard._id})">
      <f7-card>
        <f7-card-header>
          <div class="text-center_tite">{{businessCard.nick_name}}</div>
        </f7-card-header>
        <f7-card-footer>
          <div class="text-center_footer">运输:
            <span v-for="(item) in businessCard.transport">{{item|typeName()}} </span>
          </div>
        </f7-card-footer>
        <div class="item-face">
          <p class="text-gray2">企业名片</p>
          <img slot="media" src="../../assets/img/infor-face.png" class="logo-icons" />
        </div>
      </f7-card>
    </f7-link>

    <div class="row">
      <div class="col-25" v-for="item in mine_todo" @click="$f7router.navigate(item.url)">
        <f7-icon v-bind:f7="item.f7" size="24px" v-bind:class="item.f7_class"></f7-icon>
        {{item.text}}
      </div>
    </div>
    <!-- 测试 -->
    <!-- <f7-button @click="flashlight()">手电筒</f7-button> -->
  </f7-page>
</template>

<script>
import tab from '../../components/tab.vue'
import F7Link from 'framework7-vue/src/components/link'

export default {
  name: 'app',
  data () {
    return {
      businessCard: '',
        userMg:'',
      mine_todo: [
        { text: '添加邀请', url: '/mine/invite/', tx_class: '', img: '', f7: 'reload', f7_class: '' },
        { text: '个人二维码', url: '/mine/my_code/', tx_class: '', img: '', f7: 'keyboard', f7_class: '' },
        { text: '企业二维码', url: '/mine/company_code/', tx_class: '', img: '', f7: 'keyboard_fill', f7_class: '' },
        { text: '统计', url: '/mine/finance_index/', tx_class: '', img: '', f7: 'pie', f7_class: '' },
        { text: '指派司机', url: '/mine/bsLogistics/', tx_class: '', img: '', f7: 'timer_fill', f7_class: 'text-purple' },
        { text: '添加车辆', url: '/mine/add_driver/', tx_class: '', img: '', f7: 'add', f7_class: 'text-purple' },
        { text: '地址管理', url: '/mine/address/', tx_class: '', img: '', f7: 'navigation_fill', f7_class: 'text-purple' },
        { text: '红包设置', url: '/mine/traffic_coupon/', tx_class: '', img: '', f7: 'ticket_fill', f7_class: 'text-purple' },
        { text: '提现设置', url: '/mine/traffic_tixianset/', tx_class: '', img: '', f7: 'card', f7_class: 'text-purple' },
        { text: '开通服务', url: '/mine/selectDriver/', tx_class: '', img: '', f7: 'cloud_fill', f7_class: 'text-purple' },
        { text: '', url: '', tx_class: '', img: '', f7: '', f7_class: '' },
        { text: '', url: '', tx_class: '', img: '', f7: '', f7_class: '' },
        // { text: '指派司机su', url: '/mine/publishTransSu/', tx_class: '', img: '', f7: 'eye_fill', f7_class: 'text-purple' },
        // { text: '添加车辆su', url: '/mine/addDriverSu/', tx_class: '', img: '', f7: 'eye_fill', f7_class: 'text-purple' },
        // { text: '提现设置su', url: '/mine/trafficTixiansetSu/', tx_class: '', img: '', f7: 'eye_fill', f7_class: '' },
        // { text: '选择司机su', url: '/mine/selectDriverSu/', tx_class: '', img: '', f7: 'eye_fill', f7_class: '' },
        // { text: '红包设置su', url: '/mine/trafficCouponSu/', tx_class: '', img: '', f7: 'eye_fill', f7_class: '' },
      ]
    }
  },
  components: {
    F7Link,
    tab
  },
  methods: {
    flashlight () {
      window.plugins.flashlight.toggle(
        function () { },
        function () { },
        { intensity: 0.3 }
      )
    },
    async getBusinessCard () {
        this.businessCard = (await this.AccountService.getBusinessCard()).data.data
        let userId =  this.businessCard.user_id
        let param = {user_id: userId}
        this.userMg = (await this.AccountService.getPersonalPage(param)).data.data.user
    },
    sao(){
        cordova.plugins.barcodeScanner.scan( (result)=> {
            // alert("We got a barcode\n" +
            //     "Result: " + result.text + "\n" +
            //     "Format: " + result.format + "\n" +
            //     "Cancelled: " + result.cancelled);
            let msg = JSON.parse(result.text)
            if(msg.type=="company"){
                this.go('/mine/companyPage/',{businessid:msg.id,isSao:true})
            }else {
                this.go('/mine/personalPage/',{personalid:msg.id,isSao:true})
            }
            console.log(result)
        });
    }
  },
  mounted () {
    this.getBusinessCard()
  }
}
</script>

<style scoped>
.ios .link {
   display: inherit;
}
.row {
  margin: 0px 10px;
}

.col-25 {
  float: left;
  text-align: center;
  position: relative;
  margin-bottom: 25px;
}
i.f7-icons {
  display: inherit;
  height: 30px;
}
.text-gray {
  font-family: verdana, 'Hiragino Sans GB', 'Microsoft Yahei', 微软雅黑,
    'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #333;
  font-weight: 400;
  margin-top: 7px;
  font-size: 12px;
}

.text-purple {
  color: #a3a2f0;
}

.ios .navbar .right {
  margin-left: 10px;
  color: #fff;
  font-size: 14px;
}
.bg-master {
  position: relative;
  background: url('../../assets/img/bg-master.jpg') no-repeat center -53px;
  background-size: 100% 150px;
  padding-bottom: 15px;
}
.bg-master h2 {
  color: #fff;
  font-size: 20px;
  white-space: normal;
  display: inherit;
  padding: 12px 0 9px 24px;
  margin: 0;
}
.bg-master h4 {
  color: #fff;
  font-size: 12px;
  white-space: normal;
  display: inherit;
  padding: 0px 0 30px 24px;
  margin: 0;
}
.role-icon {
  vertical-align: middle;
  background: #9db7ff;
  color: #fff;
  font-size: 12px;
  border-radius: 20px;
  padding: 2px 8px;
  margin-left: 10px;
}
.logo-icon {
  position: absolute;
  right: 24px;
  top: 9px;
  width: 80px;
  height: 80px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  background: #f0f0f0;
}
.logo-icons {
  width: 48px;
  height: 48px;
  border-radius: 100%;
}
.ios .card {
  margin: 0 24px 20px 24px;
  padding: 10px 10px;
  border-radius: 5px;
}
.text-center_tite {
  font-size: 16px;
  color: #333;
}
.text-center_footer {
  font-size: 12px;
  color: #666;
  width: 250px;
}
.text-center_footer span {
  margin-right: 3px;
}
.ios .card-header,
.ios .card-footer {
  min-height: 40px;
  padding: 0px 15px;
  position: initial;
}
.item-face {
  position: absolute;
  right: 15px;
  top: 12px;
}
.text-gray2 {
  color: #e5e5e5;
  font-size: 12px;
  display: inherit;
}
.ios .page {
  background: #fff;
}
</style>
